<template>
	<view class="prove-con">
		<view class="flex-padd">
			<view class="prove-lists" v-for="(item,index) in dataList" :key="index">
				<view class="prove-list prove-title">在职证明申请</view>
				<view class="prove-list">申请时间：{{item.time}}</view>
				<view class="prove-list">申请原因：{{item.reason}}</view>
				<view class="prove-position" @click="approval(item)">
					<text class="prove-audit" style="background-color: #62c2f5;" v-if="item.audit == '0'">未审批</text>
					<text class="prove-audit" style="background-color: #19be6b;" v-else-if="item.audit == '1'">已审批</text>
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="button-con">
			<view class="button-return" @click="add">
				<view class="button">添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					id: '1',
					time: '2020-12-12 15:30:00',
					reason: '职称评定及资格考试',
					audit: '0',
				}, {
					id: '2',
					time: '2020-11-06 17:36:27',
					reason: '申请签证使用',
					audit: '0',
				}, {
					id: '3',
					time: '2020-10-10 16:20:30',
					reason: '申请信用卡/贷款使用',
					audit: '0',
				}, {
					id: '4',
					time: '2020-9-23 09:52:36',
					reason: '其他',
					audit: '0',
				}, {
					id: '5',
					time: '2020-8-09 10:12:16',
					reason: '其他',
					audit: '1',
				}]
			}
		},
		methods: {
			add() {
				uni.navigateTo({
					url: '/pages/Finance/certificateofemployment/ApplicationCertificateForm'
				})
			},
			approval(row) {
				// url传对象
				var row = JSON.stringify(row)
				uni.navigateTo({
					url: '/pages/Finance/certificateofemployment/ApprovalView?row=' + encodeURIComponent(row)
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.prove-con {
		padding: 20rpx;

		.prove-lists {
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			border: 1px solid #c8c7cc;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.prove-title {
				font-weight: 700;
			}

			.prove-list {
				padding: 4rpx 0;
			}

			.prove-position {
				position: absolute;
				top: 24rpx;
				right: 0;
				color: #FFFFFF;

				.prove-audit {
					padding: 6rpx 20rpx;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
				}
			}
		}
	}
</style>
